<#escape x as (x)!?html>
    <#import "/page/Utils.ftl" as utils/>
<head>
    <script type="text/javascript">
        var menuId = "Monitor_Reservation";
        function toggleDetail(e) {
            var tr = e.parent();
            $(tr.find("pre")).toggle();
            $(tr.find("span")).toggle();
        }

    </script>
</head>
<body>
<div>
    <table>
        <caption>
            <div class="tools border">
                Reservation Log Details <input type="button" class="btn" value="Close" onclick="window.close()"/>
            </div>
        </caption>
        <tbody>
        <tr>
            <td class="key">ERSP:</td>
            <td class="value" colspan="3">${reservation.ersp}</td>
            <td class="key">Status:</td>
            <td class="value" colspan="3">${reservation.status}</td>
        </tr>
        <tr>
            <td class="key">HotelId:</td>
            <td class="value" colspan="3">${reservation.hotelId}</td>
            <td class="key">HotelPassport:</td>
            <td class="value" colspan="3">${reservation.hotelPassport}</td>
        </tr>
        <tr>
            <td class="key">CreateTime:</td>
            <td class="value" colspan="3">${reservation.createTime}</td>
            <td class="key">LastUpdateTime.:</td>
            <td class="value" colspan="3">${reservation.lastUpdateTime}</td>
        </tr>
        <#list reservation.reservationItems as reservationItem>
            <tr>
                <td class="key">ConfirmNumber</td>
                <td class="value">${reservationItem.confirmNumber}</td>
                <td class="key">CancelNumber</td>
                <td class="value">${reservationItem.cancelNumber}</td>
                <td class="key">RoomTypeCode</td>
                <td class="value">${reservationItem.roomTypeCode}</td>
                <td class="key">RatePlanCode</td>
                <td class="value">${reservationItem.ratePlanCode}</td>
            </tr>
        </#list>
            <#list reservation.reservationLogs as reservationLog>
            <tr>
                <td class="key">${reservationLog.operationType}</td>
                <td class="value" colspan="7">
                    <table>
                        <tbody>
                            <#list reservationLog.reservationDetails as reservationDetail>
                            <tr>
                                <td ondblclick="toggleDetail($(this))">${reservationDetail.timestamp}</td>
                                <td>
                                    <pre style="display:none;">${reservationDetail.detail}</pre>
                                <span>
                                    <#if reservationDetail.detail?length&gt;550>
                                    ${reservationDetail.detail?substring(0, 550)} ...
                                        <#else>
                                        ${reservationDetail.detail}
                                    </#if>
                                </span>
                                </td>
                            </tr>
                            </#list>
                        </tbody>
                    </table>
                </td>
            </tr>
            </#list>
        </tbody>
    </table>
</div>
</body>
</#escape>